<template>
  <!-- 
    uniapp项目中 如何配置上拉加载:
      1. 找到页面配置 添加    "onReachBottomDistance": 200
      2. 在页面中配置一个钩子  onReachBottom

    uniapp项目中 如何配置下拉刷新:
      1. 找到页面配置 添加    "enablePullDownRefresh": true,
      2. 在页面中配置一个钩子  onPullDownRefresh
  -->
  <view>
    <view class="goods-list">
      <block v-for="(product, index) in productList" :key="index">
        <view class="goods-item" @click="gotoProductDetail(product)">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image
              :src="product.goods_small_logo || defaultImage"
              class="goods-pic"
            ></image>
          </view>

          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ product.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price"
                >￥{{ $formatP(product.goods_price) }}</view
              >
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  // $route.query.cid   $route.query.query
  // 这已经不再是小程序中的onLoad了   这是uni版的onLoad了
  onLoad({ cid = '', query = '' }) {
    // console.log(cid, query)
    this.params.cid = cid
    this.params.query = query

    this.getProductList()
  },

  data() {
    return {
      params: {
        cid: '',
        query: '',
        pagenum: 1,
        pagesize: 10,
      },

      total: 0,
      productList: [],

      defaultImage:
        'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',

      loading: false, // 表示正在请求中么?   节流阀(开关)
    }
  },

  methods: {
    async getProductList() {
      this.loading = true // 关门

      const { meta, message } = await this.$http.get(
        '/goods/search',
        this.params
      )

      if (meta.status !== 200) return this.$msg()

      // console.log(message)
      this.total = message.total
      // this.productList = message.goods
      this.productList = [...this.productList, ...message.goods]

      this.loading = false // 开门
    },
    // 跳转到商品详情页
    gotoProductDetail(product) {
      uni.navigateTo({
        url: `/pages_sub1/product-detail/product-detail?pid=${product.goods_id}`,
      })
    },
  },

  onReachBottom() {
    if (this.productList.length === this.total)
      return this.$msg('我是有底线的...')

    // 已经有请求了  不能再进来了
    if (this.loading) return

    // 这是个钩子 到达"底部"(你设置的距离)时触发
    console.log('到"底"了')

    this.params.pagenum++
    this.getProductList() // 移动端上拉加载一定需要 将每次请求回来的数据做合并处理
  },

  async onPullDownRefresh() {
    // 下拉时执行
    console.log('有人拉我了..')

    this.params.pagenum = 1
    this.productList = []

    // 下拉的loading效果  是固定时间关闭的
    await this.getProductList()
    uni.stopPullDownRefresh() // 停止当前页面下拉刷新
  },
}
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>
